import React,{Component} from 'react';
import{
Button,
StyleSheet,
View,
Text,
FlatList,
TouchableHighlight,
Dimensions,
ActivityIndicator
} from 'react-native';
//引入图标
//import Icon from 'react-native-vector-icons/FontAwesome';
//获取宽高
var {height, width} = Dimensions.get('window')
//设置工具列表页面
//class AllContactsScreen extends Component
class MyListItem extends Component{
  constructor(props){
    super(props)
  }
  _onPress = (id)=>{
   this.props.onPressItem(id)
  }
  render(){
    if(this.props.ColorStyles){
      var colors =  this.props.ColorStyles 
    }else{
      var colors = this.props.sorceColor
    }
    return (
      <TouchableHighlight 
        onPress={this._onPress.bind(this,this.props.id)}
        underlayColor={this.props.underlayColor}  
        activeOpacity={0.5}   
        style={{ borderRadius: 8}}
      >
      <View style={styles.item}>
        <Text style={[styles.title,{color:colors}]}>
          {this.props.title}
        </Text>
      </View>
      </TouchableHighlight>
    )
  }
}
class Townlist extends Component{
  constructor(props){
    super(props);
    this.state = {
      dataInfo : [],
      selected: (new Map(): Map<string, boolean>)
    }
  }
  _isArrays(arr){
    return arr instanceof Array
  }
  componentDidMount() {
      if(this.props.navigation.state.params.datajsons){
        const {datajsons,person,choseName} = this.props.navigation.state.params
        console.log(person)
        if(this._isArrays(datajsons[0].sub)==false&&person==true){
          var dataJson = []
          dataJson = dataJson.concat(datajsons)
          dataJson.shift()
        }else{
          var dataJson = []
          dataJson = dataJson.concat(datajsons) 
        }
        console.log(choseName)
        this.setState({
          dataInfo:this.state.dataInfo.concat(dataJson)
        })
      }
  }
  _childMethod(arr) {
    let newJson = []
    newJson = newJson.concat(this.state.dataInfo)
    newJson.map((item,i)=>{
      if(i===arr){
        item.style = this.props.onPressColor
      }else{
        item.style = null
      }
    })
    this.setState({
      dataInfo:newJson
    })
  }
  _onPressItem(id:string){
    this.props.navigation.setParams({
      choseTittle:'确定'
    })
    //判断是否有第三级
    if(this._isArrays(this.state.dataInfo[id].sub)){
      let TownName = []
          TownName.push(this.props.navigation.state.params.choseName[0])

          TownName.push(this.state.dataInfo[id].name)
      this.props.navigation.navigate('City', { 
        datajsons: this.state.dataInfo[id].sub,
        choseId:id,
        choseName:TownName,
        person:this.props.person,
        callBackFun:this._childMethod.bind(this)
    })
    }else{
      let TownName = []
          TownName.push(this.props.navigation.state.params.choseName[0])
          TownName.push(this.state.dataInfo[id].name)
      console.log(TownName)
      this._childMethod(id)
    }

  }
  _renderItem = ({item,index})=>(
    <MyListItem
    id={index}
    onPressItem={this._onPressItem.bind(this)}
    {...this.props}
    ColorStyles = {item.style}
    title={item.name}
    />
  )
  _keyExtractor = (item,index)=>item.name
  render(){
    return(
        <FlatList
          data={this.state.dataInfo}
          extraData = {this.state}
          keyExtractor={this._keyExtractor.bind(this)}
          renderItem = {this._renderItem.bind(this)}
          onEndReachedThreshold = {20}
          showsVerticalScrollIndicator = {false}
          horizontal = {false}
          numColumns ={3}
          columnWrapperStyle={styles.columStyle}
        />
    ); 
  }
}
const styles = StyleSheet.create({
  item:{
    width:width/3,
    marginBottom:10,
    backgroundColor:'transparent'
  },
  thumb:{
    width:width,
    height:width*0.5,
    resizeMode:'cover'
  },
  title:{

    padding:10,
    fontSize:18,
    color:'#333',
    textAlign:'center'
  },
  columStyle:{
    borderWidth:0,
    
    backgroundColor:'transparent'
  }
})
module.exports =  Townlist;